<template>
    <div id="father">
        <div id="arrors">
            <!-- 根据nvaBool显示箭头的图标 -->
            <!-- 给图标设置点击事件切换vuex中 navBool 的值 -->
            <el-icon @click="ck">
                <caret-left v-if="store.state.homeview.navBool" />
                <caret-right v-else />
            </el-icon>
        </div>
        <!-- 下拉框 -->
        <div id="slectDown">
            <el-dropdown>
            <span class="el-dropdown-link">
            你好，<span>{{username}}</span>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item divided @click="goSetting">设置</el-dropdown-item>
                    <el-dropdown-item divided @click="goBack">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
// 头部设置图标来切换导航
import { CaretRight,CaretLeft } from "@element-plus/icons-vue";
import { useStore } from "vuex";
// 下拉框选择
import { ArrowDown } from '@element-plus/icons-vue'
import { Ref } from "vue";
import router from "@/router";
// 使用vuex进行状态管理

    const store = useStore()
    // 这里要写let，否则会不执行
    let ck = ()=>{
        // console.log("我被点击了");
        // 触发mutation修改
        store.commit("SET_NAVBOOL")    
    }
    let username =localStorage.getItem('username')

    // 跳转至设置界面
     function goSetting(){
        router.push('/home/setting')
        console.log("我要跳转")
    }
    //退出 
    const goBack = ()=>{
        localStorage.clear()
        router.push('/login')
    }
</script>

<style lang="scss" scoped>

#father{
    width:100%;
    display:flex;
    justify-content: right;
    #arrors{
        flex: 1;
        line-height: 60px;  
        margin-top: 6px;
        text-align: center;
        // margin-right: 200px;
        // flex-direction: column;
        .el-icon{
            font-size:20px;//设置图标大小
        }
        line-height: 60px;
    }
    //    下拉框
    #slectDown{
        flex: 1; 
        justify-content: right;
        line-height: 60px;  
        text-align:right;
        .el-dropdown{ 
            .example-showcase .el-dropdown-link {
                cursor: pointer;
                color: var(--el-color-primary);
                display: flex;
                align-items: center;
            }
        }

    }
}


</style>